<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>管理员登录</title>
    <style>
        :root {
            --boxRadius: 15px;
            --butoonRadius: 5px
        }

        body {
            margin: 0;
            height: 100vh;
            background-image: radial-gradient(#a7a7a7 7%,#2e2e2e);
            /*background-image: url("/image/bg.jpg");*/
            background-position: 0 0;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .login_box {
            min-width: 300px;
            max-width: 450px;
            aspect-ratio: 3/2;
            position: relative;
            padding: 10px 20px;
            box-sizing: border-box;
            left: 50%;
            top: 20%;
            transform: translate(-50%, 0);
            border-radius: var(--boxRadius);
            backdrop-filter: blur(20px);
            box-shadow: 0 0 15px #b9b9b9;
        }

        .title {
            color: #ffffff;
            display: grid;
            place-items: center;
        }

        .from_item {
            width: 100%;
            height: 30%;
            padding: 10px;
            box-sizing: border-box;
        }

        .submit {
            width: 100%;
            height: 70%;
            box-sizing: border-box;
            border-radius: var(--butoonRadius);
            outline: none;
            border: none;
            padding: 10px;
            font-size: 16px;
        }

        .login_button {
            height: 60%;
            font-size: 16px;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="login_box">
    <div class="from_item">
        <h2 class="title">管理员登录</h2>
    </div>
    <div class="from_item">
        <label>
            <input class="submit" id="usernameNode" type="text" placeholder="请输入用户名">
        </label>
    </div>
    <br>
    <div class="from_item">
        <label>
            <input class="submit" id="passwordNode" type="password" placeholder="请输入密码">
        </label>
    </div>
    <div class="from_item">
        <button class="login_button submit" id="login">登录</button>
    </div>

</div>
<script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
<script>
    const usernameNode = document.querySelector("#usernameNode")
    const passwordNode = document.querySelector("#passwordNode")
    const loginNode = document.querySelector("#login")

    loginNode.addEventListener("click", () => {
        let {value: username} = usernameNode
        let {value: password} = passwordNode
        username = username.trim()
        password = password.trim()
        if (!username || !password) return alert("用户名或密码为空")
        $.ajax("/admin/login", {
            method: "post",
            // contentType: false,
            processData: false,
            data: `username=${username}&password=${password}`,
            success: function (result) {
                if (result.code === 200){
                    window.localStorage.setItem("adminToken",result.data)
                    location.replace("/public/admin/index.html")
                }else{
                    alert(result.msg)
                }

            },
            error: function () {
                alert("发生错误，请联系管理员")
            }
        })
    })
</script>
</body>
</html>
